// import './index.css'
import { Breadcrumb, Card, Form, Button, Radio, Select, DatePicker, Space, Table, Tag } from 'antd'
import { Link } from 'react-router-dom'
import { Component } from 'react'
import { http } from '../../utils'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'

import defaultImage from '../../assets/image/error.png'

const { Option } = Select
const { RangePicker } = DatePicker
// 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，不传为全部
const articleState = {
  0: { color: 'gold', text: '草稿' },
  1: { color: 'lime', text: '待审核' },
  2: { color: 'green', text: '审核通过' },
  3: { color: 'red', text: '审核失败' },
}

class ArticleList extends Component {
  state = {
    channelList: [],
    // 是个对象,分页和总条数等等的
    article: {
      status: '',
      total_count: 0,
    },
  }
  // 表格的配置 因为放在render里面会每次都渲染 所以拿出来  作为一个属性

  columns = [
    {
      // 为了展示,dataIndex 与数据中匹配
      // dataIndex	列数据在数据项中对应的路径，支持通过数组查询嵌套路径	string | string[]
      title: '封面',
      dataIndex: 'cover',

      // 自定义渲染表格 render的值是一个回调函数,通过函数的返回值来指定要渲染的内容
      render: data => {
        // console.log('data啊', data)
        // const { type, image } = data
        return <img src={data.images[0] || defaultImage} alt='' width={200} height={150} />
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',

      render: status => {
        console.log('状态的', status)
        // 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，不传为全部
        // 判断状态值,每个给不同颜色
        // let color,text  if(data===)  最优化的写法
        const curData = articleState[status]
        return <Tag color={curData.color}>{curData.text}</Tag>
      },
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
      key: 'tags',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      // dataIndex: 'status',
      // 此处不需要参数   格式需要幽灵节点
      render: () => {
        return (
          <Space size='middle'>
            <Button type='primary' shape='circle' icon={<EditOutlined />} />
            <Button type='primary' shape='circle' icon={<DeleteOutlined />} danger />
          </Space>
        )
      },
    },
  ]
  componentDidMount() {
    this.getChannelList()
    this.getArticleList()
  }
  // 获取频道信息
  async getChannelList() {
    const res = await http.get('/channels')
    // console.log(' res', res)
    const { channels } = res.data.data
    this.setState({
      channelList: channels,
    })
  }

  // 进入页面时   获取文章列表
  async getArticleList() {
    const res = await http.get('/mp/articles')
    // console.log('文章', res)

    this.setState({
      article: res.data.data,
    })
  }

  // form的提交事件 onFinish	提交表单且数据验证成功后回调事件	function(values)
  // values=表单中带着name的值  form-item
  query = async values => {
    // 表单中拿到的数据,无法直接作为接口参数
    console.log('表单的值', values)
    // 解构
    const { status, channel_id, date } = values
    // 查询参数是可选的,只需要在查询参数选择后,再拼接到对象中,传递给接口作为请求参数
    // 创建一个对象
    const queryParams = {}
    // 1.先处理状态,不传为全部=-1
    if (status !== -1) {
      queryParams.status = status
    }
    //2.再处理频道
    if (channel_id) {
      queryParams.channel_id = channel_id
    }
    // 3.处理日期
    if (date) {
      console.log(date)
      // date[]为moment对象格式,传给接口需要先转为字符串格式
      const begin_pubdate = date[0].startOf('day').format('YYYY/MM/DD HH:mm:ss')

      const end_pubdate = date[1].endOf('day').format('YYYY/MM/DD HH:mm:ss')
      console.log('aaaa嗷嗷', end_pubdate)

      queryParams.begin_pubdate = begin_pubdate
      queryParams.end_pubdate = end_pubdate
    }
    // 每次查询, 都应该从page1开始
    queryParams.page = 1

    const res = await http.get('/mp/articles', {
      params: queryParams,
    })

    // 3.
    this.setState({
      article: res.data.data,
    })
    // console.log('queryParams', queryParams)
  }

  // 分页获取文章列表数据
  // http设置过token请求头了,所以这里不用了
  // 两种情况:1.没筛选 直接传入两个参数  2.筛选:基于筛选后的数据进行分页 即筛选后再传入参数
  // 所以  直接拿筛选数据 (没筛选 直接拿空对象,有筛选  拿到筛选数据)
  changePage = async (page, pageSize) => {
    console.log('切换分页', page, pageSize)
    const res = await http.get('/mp/articles', {
      params: {
        ...this.params,
        page,
        per_page: pageSize,
      },
    })

    // 3.
    this.setState({
      article: res.data.data,
    })
  }
  // 删除按钮

  render() {
    // article再次解构
    const {
      channelList,
      article: { results, total_count, per_page, page },
    } = this.state
    // console.log('啊啊啊啊', this.state)

    return (
      <>
        <Card
          title={
            <Breadcrumb separator='>'>
              <Breadcrumb.Item>
                <Link to='/home'>首页</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>内容管理</Breadcrumb.Item>
            </Breadcrumb>
          }
        >
          {/* 设置单选默认值  value:-1也行*/}
          <Form name='basic' initialValues={{ status: -1 }} onFinish={this.query}>
            <Form.Item label='状态' name='status' rules={[]}>
              <Radio.Group>
                <Radio value={-1}>全部</Radio>
                <Radio value={0}>草稿</Radio>
                <Radio value={1}>待审核</Radio>
                <Radio value={2}>审核通过</Radio>
                <Radio value={3}>审核失败</Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item label='频道' name='channel_id' rules={[]}>
              <Select placeholder='请选择文章频道' style={{ width: 200 }}>
                {channelList.map(item => (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item label='日期' name='date'>
              <RangePicker />
            </Form.Item>

            <Form.Item
            // 设置布局样式
            >
              <Button type='primary' htmlType='submit'>
                筛 选
              </Button>
            </Form.Item>
          </Form>
        </Card>

        <Card title={`根据筛选条件共查询到${total_count}条结果`}>
          {/* columns=列
          data每一项 
          dataSource	指定数据  数据数组	object[] */}
          <Table
            columns={this.columns}
            dataSource={results}
            // 注意加id 表示用数据源中的哪一项来作为key值
            rowKey='id'
            pagination={{
              // 注意配置项是一个数组
              position: ['bottomCenter'],
              // 总条数
              total: total_count,
              // 每页大小
              pageSize: per_page,
              // 当前页
              current: page,
              // 当前页  或者 每页大小改变时触发的回调
              onChange: this.changePage,
            }}
          />
        </Card>
      </>
    )
  }
}

export default ArticleList
